<template>
    <div class="share">
        <transition name="fade">
            <div v-if="shareShow" class="share-bg" @click="onCancel"></div>
        </transition>
        <transition name="bottom">
            <div class="popup" v-if="shareShow">
                <h5 class="title">{{title}}</h5>
                <div class="options">
                    <slot></slot>
                </div>
                <div class="cancel" v-show="cancel" @click="onCancel">取消</div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'Share',
    props: {
        shareShow: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        cancel: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        onCancel() {
            this.$emit('onBg',false)
        }
    }
}
</script>

<style scoped>
.share .share-bg{
    width:100vw;
    height:100vh;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top:0;
    z-index:2019;
}
.share .popup{
    border-radius:0.5rem 0.5rem 0 0;
    position: fixed;
    z-index:2020;
    bottom:0;
    left:0;
    right:0;
    height:28vh;
    background:#fff;
}
.share .popup .title{
    text-align: center;
    font-size:0.36rem;
    padding:0.16rem 0 0.32rem 0;
    color:#333;
}
.share .popup .options{
    min-width:100vw;
    overflow-y: hidden;
    overflow-x: visible;
    
}
.share .popup .cancel{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    border-top:0.14rem solid #f7f8fa;
    line-height:0.96rem;
    text-align: center;
    font-size:0.32rem;
    font-weight:600;
    background:#fff;
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .4s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.bottom-enter-active, .bottom-leave-active {
    transition: margin-bottom .5s;
}
.bottom-enter, .bottom-leave-to{
    margin-bottom:-28vh;
}
</style>